import { useState, useEffect } from 'react';
import {useLocation} from 'react-router-dom';
import 'antd/dist/antd.css';
import { Table,Divider, Pagination} from 'antd';
import axios from 'axios';
import AddModel from '../addSingIntoList/index';

const SongList = (props) => {


  const location = useLocation()

  const columns = [
    {
      key: 'nameOfSong',
      title: '歌名',
      dataIndex: 'nameOfSong',
      width: '20%',
    },
    {
      key: 'singer',
      title: '歌手',
      dataIndex: 'singer',
      width: '20%',
    },
    {
      key: 'action',
      title: '操作',
      render: (text, record) => {
        return <>
          <a onClick={()=>{addMusic(record.filePath)}}>播放</a>
          <Divider type={'vertical'} />
          <a onClick={()=>addSingList(record.id)}>添加歌单</a>
        </>
      }
    }
  ];
  const [data, setData] = useState([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 8,
  });
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [param, setParam] = useState(location.state?.param);
  const [selectRow,setSelectRow] = useState();
  const [isVis,setIsVis] = useState(false);
  const [isVisibleMusic,setIsVisibleMusic] = useState();

  useEffect(() => {
    console.log('location',location);
    getData({
      param: {
        nameOfSong: param,
      },
    }).then((res) => {
      setData(res.data.rows);
      setLoading(false);
      setTotal(res.data.total);
    })
  },[]);

  const getData = (param) => {
    return (
      axios.post('http://127.0.0.1:8080/tsong/query', {
        pageNo: pagination.current,
        pageSize: pagination.pageSize,
        ...param
      })
    )
  };

  const addMusic = (file) => {
    setIsVisibleMusic(file)
  }

  const addSingList = (id) => {
    handleVisible(true);
    setSelectRow(id);
  }

  const onChangePage = (pageNo, pageSize) => {
    setLoading(true);
    getData({
      pageNo: pageNo,
      // pageSize: pageSize,
      param: {...param},
    }).then((res)=>{
      setData(res.data.rows);
      setPagination({...pagination,current: pageNo})
      setLoading(false);
    })
  }

  const handleTableChange = (pagination) => {
    setLoading(true);
    getData({
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      param: {...param},
    }).then((res) => {
      setData(res.data.rows);
      setLoading(false);
      setPagination({
        ...pagination,
        total: res.data.total,
      })
    })
  }

  const handleVisible = (display)=>{
    setIsVis(display);
  }

  return (<>
    {isVisibleMusic&&(<audio controls>
      <source src={"http://localhost:8080/mp3/"+isVisibleMusic} />
      您的浏览器不支持 audio 元素。
    </audio>)}
    <AddModel row={selectRow} isVisible={isVis} onClose={handleVisible} />
    <Table
      columns={columns}
      rowKey={record => record.id}
      dataSource={data}
      pagination={false}
      loading={loading}
      // onChange={handleTableChange}
    />
    <Pagination showQuickJumper defaultCurrent={1} total={total} onChange={onChangePage} />
  </>);
}

export default SongList;